<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="78px">
      <el-form-item label="户编号" prop="fid">
        <el-input
          v-model="queryParams.fid"
          placeholder="请输入户编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="自然村" prop="natVillage">
        <el-select v-model="queryParams.natVillage" placeholder="请选择自然村" clearable>
          <el-option
            v-for="dict in base_nature_village"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="户主姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入户主姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-table v-loading="loading" :data="average_income_comparisonList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="户编号" align="center" prop="fid" />
      <el-table-column label="户主姓名" align="center" prop="name" />
      <el-table-column label="证件号码" align="center" prop="idCard" />
      <el-table-column label="上一年人均收入" align="center" prop="lastAvgIncome" />
      <el-table-column label="本年人均收入" align="center" prop="avgIncome" />
      <el-table-column label="自然村" align="center" prop="natVillage">
        <template #default="scope">
          <dict-tag :options="base_nature_village" :value="scope.row.natVillage"/>
        </template>
      </el-table-column>
      <el-table-column label="是否返贫" align="center" prop="isBackIntoPoverty">
        <template #default="scope">
          <dict-tag :options="return_to_poverty" :value="scope.row.isBackIntoPoverty"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="修改" placement="top" v-if="scope.row.fid !== 1">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                  v-hasPermi="['NH:average_income_comparison:edit']"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top" v-if="scope.row.fid !== 1">
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
            v-hasPermi="['NH:average_income_comparison:remove']"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination
            v-show="total>0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
    />


    <!-- 添加或修改户收入对比对话框 -->
<!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="行政村" prop="admVillage">-->
<!--          <el-select v-model="form.admVillage" placeholder="请选择行政村">-->
<!--            <el-option-->
<!--              v-for="dict in dict.type.base_administration_village"-->
<!--              :key="dict.value"-->
<!--              :label="dict.label"-->
<!--              :value="parseInt(dict.value)"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="自然村" prop="natVillage">-->
<!--          <el-select v-model="form.natVillage" placeholder="请选择自然村">-->
<!--            <el-option-->
<!--              v-for="dict in dict.type.base_nature_village"-->
<!--              :key="dict.value"-->
<!--              :label="dict.label"-->
<!--              :value="parseInt(dict.value)"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="户主姓名" prop="name">-->
<!--          <el-input v-model="form.name" placeholder="请输入户主姓名" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="户联系电话" prop="phone">-->
<!--          <el-input v-model="form.phone" placeholder="请输入户联系电话" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="人口数" prop="num">-->
<!--          <el-input v-model="form.num" placeholder="请输入人口数" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="耕种面积" prop="area">-->
<!--          <el-input v-model="form.area" placeholder="请输入耕种面积" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="户类别" prop="familyType">-->
<!--          <el-select v-model="form.familyType" placeholder="请选择户类别">-->
<!--            <el-option-->
<!--              v-for="dict in dict.type.base_family_type"-->
<!--              :key="dict.value"-->
<!--              :label="dict.label"-->
<!--              :value="parseInt(dict.value)"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="户状态(0-有人 1-绝户)" prop="state">-->
<!--          <el-input v-model="form.state" placeholder="请输入户状态(0-有人 1-绝户)" />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

<script setup>
import { listAverage_income_comparison,
          getAverage_income_comparison,
          delAverage_income_comparison,
          addAverage_income_comparison,
          updateAverage_income_comparison } from "@/api/NH/average_income_comparison";

const router = useRouter();
const {proxy} = getCurrentInstance();
const {base_nature_village,return_to_poverty} = proxy.useDict("base_nature_village","return_to_poverty");
// 遮罩层
const loading = ref(true);
// 选中数组
const ids = ref([]);
// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
// 显示搜索条件
const showSearch = ref(true);
// 总条数
const total = ref(0);
// 农户收入信息管理表格数据***
const average_income_comparisonList = ref([]);
// 弹出层标题
const title = ref("");
// 是否显示弹出层
const open = ref(false);

const dateRange = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    fid: null,
    admVillage: null,
    natVillage: null,
    name: null,
    phone: null,
    num: null,
    area: null,
    familyType: null,
    state: null
  },
      rules: {
        natVillage: [
          { required: true, message: "自然村不能为空", trigger: "change" }
        ],
        name: [
          { required: true, message: "户主姓名不能为空", trigger: "blur" }
        ]
      }
});
const {queryParams, form, rules} = toRefs(data);

    /** 查询户收入对比列表 */
  function getList() {
      loading.value = true;
      listAverage_income_comparison(proxy.queryParams).then(response => {
        average_income_comparisonList.value = response.rows;
        total.value = response.total;
        loading.value = false;
      });
    };
    // 取消按钮
    function cancel() {
      open.value = false;
      reset();
    };
    // 表单重置
   function reset() {
     form.value = {
        fid: null,
        admVillage: null,
        natVillage: null,
        name: null,
        phone: null,
        num: null,
        area: null,
        familyType: null,
        state: null
      };
     proxy.resetForm("form");
    };
    /** 搜索按钮操作 */
   function handleQuery() {
      queryParams.value.pageNum = 1;
      getList();
    };
    /** 重置按钮操作 */
   function resetQuery() {
      dateRange.value = [];
      proxy.resetForm("queryForm");
      handleQuery();
    };
    // 多选框选中数据
   function handleSelectionChange(selection) {
      ids.value = selection.map(item => item.fid)
      single.value = selection.length!==1;
      multiple.value = !selection.length;
    };
    /** 新增按钮操作 */
    function handleAdd() {
      reset();
      open.value = true;
      title.value = "添加户收入对比";
    };
    /** 修改按钮操作 */
   function handleUpdate(row) {
      reset();
      const fid = row.fid || ids.value;
      getAverage_income_comparison(fid).then(response => {
        form.value = response.data;
        open.value = true;
        title.value =  "修改户收入对比";
      });
    };
    /** 提交按钮 */
   function submitForm() {
      proxy.$refs["form"].validate(valid => {
        if (valid) {
          if (form.value.fid != null) {
            updateAverage_income_comparison(form.value).then(response => {
              proxy.$modal.msgSuccess("修改成功");
              open.value = false;
              getList();
            });
          } else {
            addAverage_income_comparison(form.value).then(response => {
              proxy.$modal.msgSuccess("新增成功");
              open.value = false;
              getList();
            });
          }
        }
      });
    };
    /** 删除按钮操作 */
   function handleDelete(row) {
      const fids = row.fid || ids.value;
      proxy.$modal.confirm('是否确认删除户收入对比编号为"' + fids + '"的数据项？').then(function() {
        return delAverage_income_comparison(fids);
      }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    };
    /** 导出按钮操作 */
   function handleExport() {
  proxy.download('NH/average_income_comparison/export', {
        ...queryParams.value,
      }, `average_income_comparison_${new Date().getTime()}.xlsx`);
    };
getList();
</script>
